本日小作品：
https://codepen.io/linchinhsuan/pen/eYZKGdz

練習重點摘要：

<figure>

為HTML5的新element，主要用途是在網頁中放入一個插圖區域。

<figcaption>

通常和<figure>一起使用，作為前者的最後一個子元素，如小作品中表示的，作為圖片的輔助說明。也有人會為了SEO使用然後隱藏起來。

display: flex;justify-content: center;

在導覽列使用這段，讓所有的li都可以排成一列，並且因為下了justify-content: center;，導覽列會水平置中。

display: block;text-decoration: none;

針對導覽列的，前者是讓他變成一個區塊元素，使我們能夠賦予他寬高，同時也讓點擊範圍變大。後者是為了消除預設的下底線。

li:hover

滑鼠移動過去後會切換背景顏色的效果，使用了:hover這個偽類選取器。

flex-wrap: wrap;justify-content: space-around;

在第一個使用flex排青蛙的案例中，使用了flex-wrap: wrap;讓青蛙會自動折行（青蛙被設定成寬度為父容器的40%），如果沒有這行程式碼，青蛙就會擠在一起。後者是讓剩餘空間自動分配到子物件左右，以小作品為例，剩餘20%空間，一個物件10%分成5% 5%分布到左右，最終就是左中右各為5% 10% 5%的空間分布。

float: left;margin: 0 5%;

另一個則是練習傳統float排版，使用float: left;讓青蛙靠左，然後因為float本身會自動折行所以就不用考慮這方面的問題。最後為了達到跟上面一樣的排版效果，使用margin: 0 5%;讓圖片左右各推5%的空間。

.clearfix{clear: both;}

使用float會讓物件「浮」起來，可以想成青蛙跟背景在不同平面上，此時背景因為以無任何內容，高度就會消失（父層的高度是被子物件撐起來的）。為了讓背景保留住，在子物件最後寫下一個<div class="clearfix"></div>，然後設定.clearfix{clear: both;}。這樣一來就只有這個子物件不會浮動，就有東西可以撐開父元素的高度了。

－－－

備註：
青蛙圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是第二天，如果這三十天過程中有寫錯的地方還麻煩各路高手指教！